<template>
    <div>
        <NavHeader></NavHeader>
        <div class="h_box">
            <div class="h_c_top">
                <div class="title_box">
                    <div class="h_c_left">  
                        <h2 class="title_name">考试曲线积分</h2>             
                        <div class="info_box">
                        <span>题量:6  </span> <span>总分:100</span>
                    </div>
                    <div class="info_box">
                        作答时间:2020-05-10 07:56至2020-05-15 19:57
                    </div>
                    </div>
                </div>
                <div class="bottom_box">
                    <ul>
                        <li class="work_box">
                            <p class="tip">1. (单选题)</p>
                            <el-radio-group v-model="radio">
                              <el-radio :label="3">A 备选项</el-radio>
                              <el-radio :label="6">B 备选项</el-radio>
                              <el-radio :label="9">C 备选项</el-radio>
                            </el-radio-group>
                        </li>
                        <li class="work_box">
                            <p class="tip">2. 多选题</p>
                            <el-checkbox-group v-model="checkList">
                              <el-checkbox label="复选框 A"></el-checkbox>
                              <el-checkbox label="复选框 B"></el-checkbox>
                              <el-checkbox label="复选框 C"></el-checkbox>
                            </el-checkbox-group>
                        </li>
                        <li class="work_box">
                            <p class="tip">3. 填空题</p>
                            <el-input
                              class="w_input"
                              placeholder="请输入内容"
                              v-model="input"
                              size="medium"
                              maxlength= 20
                              clearable>
                            </el-input>
                        </li>
                        <li class="work_box">
                            <p class="tip">4. 简答题</p>
                            <el-input
                             class="w_textarea"
                             type="textarea"
                             :autosize="{ minRows: 2, maxRows: 8}"
                             placeholder="请输入内容"
                             v-model="textarea1">
                           </el-input>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="h_c_right">
                <div class="timeout">
                   <p><i class="el-icon-time"></i> {{ `${hr}: ${min}: ${sec}` }}</p>
                   <el-button class="button1" v-show="isshow1" @click="begin" round type="primary">开始答题</el-button>
                   <el-button class="button1" v-show="!isshow1" @click="open" round type="danger">交卷</el-button>
               </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavHeader from '../components/NavHeader.vue'
// import Time from '../components/test1.vue'
export default {
    data(){
        return{
          radio: 0,
          checkList: ['复选框 A'],
          input:'',
          textarea1:'',
          isshow1: true,
          time: '',
          hr: 3,
          min: 30,
          sec: 0,
        }
    },
    components:{
        NavHeader,
    },
    methods: {
        begin() {
            // 点击按钮后开始计算指定长度的时间
            this.time = (Date.parse(new Date()) + ((3.5 * 60 * 60)) * 1000);
            localStorage.setItem("startime",this.time)
            // 开始执行倒计时
            this.countdown();
            // 更换按钮，根据情况选择v-if或v-show
            this.isshow1 = false;
            this.$message({
                type: 'success',
                message: '开始答题'
            });
        },
        countdown() {
            const end = localStorage.getItem("startime"); // 定义结束时间
            const now = Date.parse(new Date()); // 获取本地时间
            const msec = end - now; // 定义总共所需的时间
            sessionStorage.setItem('contiune',1)
            // 将时间戳进行格式化
        let hr = parseInt(msec / 1000 / 60 / 60 % 24);
        let min = parseInt(msec / 1000 / 60 % 60);
        let sec = parseInt(msec / 1000 % 60);
        // 倒计时结束时的操作
        const that = this;
        if (this.hr == 0 && this.min == 0 && this.sec == 0) {
            console.log('时间已经结束，答题完毕');
            this.hr = 3;
            this.min = 30;
            this.sec = 0;
            sessionStorage.removeItem('contiune')
            localStorage.removeItem("startime")
        } else {
            // 如时间未归零则继续在一秒后执行
            this.hr = hr > 9 ? hr : '0' + hr;
            this.min = min > 9 ? min : '0' + min;
            this.sec = sec > 9 ? sec : '0' + sec;
            setTimeout(that.countdown, 1000)
        }
        },
        open() {
            this.$confirm('即将结束答题, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then((action) => {
                // eleUI的确定结束回调函数方法
                if (action === 'confirm') {
                    this.hr = 0;
                    this.min = 0;
                    this.sec = 0;
                    console.log(this.hr + ',' + this.min + ',' + this.sec);
                    this.isshow1 = true;
                    sessionStorage.removeItem('contiune');
                    localStorage.removeItem("startime");
                }
                this.$message({
                    type: 'success',
                    message: '交卷成功!'
                });
            }).catch(() => {
                // 点击取消后
                this.$message({
                    type: 'info',
                    message: '已取消交卷'
                });
            });

        },
    },
    mounted(){
       if(sessionStorage.getItem("contiune") == 1){
        this.countdown()
        this.isshow1 = false
       }
    },
    destroyed(){
       if(this.time){
         clearInterval(this.time)
       }
       sessionStorage.removeItem("contiune")
    }
}
// let leaveTime;
// let inTime;
// let num = 0;
// document.addEventListener('visibilitychange',function(){
//     let state = document.visibilityState
//     if(state == 'hidden'){
//         leaveTime = (new Date()).getTime();
//         num++;
//     }
//     if(state == 'visible'){
//         inTime = (new Date()).getTime();
//         let time = (Number(inTime) - Number(leaveTime))/1000;
//         alert('用户离开了:' + time + 's' + '\n' + '用户离开了:' + num + '次')
//     }   
// })
</script>

<style lang="scss" scoped>
  .h_box{
    width: 80%;
    min-height: 800px;
    background-color: #f2f4f7;
    padding:10%;
    .h_c_top{
        width: 70%;
        min-height: 600px;
        background-color: white;
        border-radius: 10px;
        padding-bottom: 50px;
        .title_box{
          width: 100%;
          height: 120px;
          border-bottom: 1px solid #f2f2f2;
          .h_c_left{
            width: 80%;
            .title_name{
            width: 100%;
            line-height: 25px;
            padding: 30px 80px 0;
            font-size: 18px;
            font-weight: bold;
            }
            .info_box{
              width: 100%;
              line-height: 16px;
              font-size: 14px;
              color: rgb(168,168,179);
              padding-left: 80px;
              margin:10px 0;
            }
          }
        }
        .bottom_box{
            width: 100%;
            padding-top:50px;
            .work_box{
               width: 100%;
               height: auto;
               margin-top:20px;
               padding-left:80px;
               font-size: 14px;
               .tip{
                margin-bottom: 10px;
               }
               .w_input{
                width: 250px;
               }
               .w_textarea{
                width: 400px;
               }  
            }
        }
    }
    .h_c_right{
        width: 300px;
        height: 200px;
        font-size: 18px;
        font-weight: bold;
        background-color: white;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top:200px;
        right:120px;
        .timeout{
         width: 100%;
         height: 120px;
         position: relative;
         p{
            position: absolute;
            top:30%;
            left:50%;
            transform: translate(-50%,-50%);
         }
         .button1{
            position: absolute;
            top:80%;
            left:50%;
            transform: translate(-50%,-50%);
         }
        }
    }
  }
</style>